<template>
	<view class="container">
		<com-head textTit="消费记录" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template>
			<view class="box">
				<view class="dateWrap"  @click="show = true">
					<text>时间</text>
					<view class="date">
						<text>{{form.start_time ? form.start_time : '请选择'}}</text>
						<text class="zhi">至</text>
						<text>{{form.end_time ? form.end_time : '请选择'}}</text>
					</view>
				</view>
			</view>
			<view class="listWrap" v-if="list.length">
				<view class="priceWrap">
					<view class="">
						总消费：<text>{{orders}}元</text>
					</view>
					<view class="">
						余额：<text>{{userInfo.balance}}元</text>
					</view>
				</view>
				<view class="list" v-for="(ele,index) in  list" :key="index">
					<view class="info" >
						<view class="left">
							<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
							<text>{{ele.orders.store.title}}</text>
						</view>
						<view class="right">
							<!-- <view class="t1" v-if="ele.orders.pay_type == 1">0.00</view> -->
							<view class="t1">-{{ele.orders_payable}}</view>
							<!-- <view class="t2">余额 2300.00</view> -->
						</view>
					</view>
					<view class="t3" v-if="ele.project_name">
						购买项目：<text>{{ele.project_name}}</text>
					</view>
					<view class="t3" v-else>
						购买商品：<text>{{ele.goods_name}}</text>
					</view>
					<view class="t3">
						服务技师：<text>{{ele.staffList[0].staff.name || '-'}}</text>
					</view>
					<view class="t3">
						消费时间：<text>{{ele.create_time}}</text>
					</view>
				</view>
				<!-- <u-loadmore margin-top="60" margin-bottom="30" :status="status" /> -->
			</view>
			<!-- 没有数据时 -->
			<view class="noDate" v-else>
				<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
				<view>您还没有消费记录哦~</view>
			</view>
		</template>
		<u-calendar v-model="show" :max-date="tomorrow" :mode="range"  @change="change"></u-calendar>
	</view> 
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				show:false,
				statTime:'',
				endTime:'',
				orders:'',
				form:{
					start_time:'',
					end_time:''
				},
				scrollTop: 0
			}
		},
		computed:{
			tomorrow(){ 
				let date = new Date(new Date().getTime() + 86400000);
				return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.getDate()
			this.getConsume()
		},
		async onPullDownRefresh() {
			this.list=[]
			this.getDate()
			this.$u.toast('刷新成功!')
			await this.getConsume()
			uni.stopPullDownRefresh()
		},
		methods: {
			//获取当月第一天和当天
			getDate() {
			  var date = new Date();
			  let date2 = new Date(date.getTime() + 86400000);
			  date.setDate(1);
			  // console.log(date2.getDate(),'mt');
			  var dateStart =
				date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			  var dateEnd = this.utlis.getNowDate(date2, true);
			  this.form.start_time = dateStart;
			  this.form.end_time = dateEnd;
			  console.log(this.form,"this.formthis.formthis.form")
			},
			async change(e){
				this.form.end_time = e.endDate
				this.form.start_time = e.startDate
				this.list=[]
				await this.getConsume()
			},
			async getConsume(){
				let {code,data} = await this.$u.api.getConsume(this.form);
				if(code){
					this.list = data.orders
					this.orders = data.sum_price || '999'
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
	.container{
		padding: 50rpx 32rpx;
		.box{
			width: 690rpx;
			left: 32rpx;
			// position: fixed;
			z-index: 9;
			// background-color: #F4F6F8 !important;
			// padding-top: 20rpx;
			// top: 150rpx;
		}
		.dateWrap{
			display: flex;
			border-radius: 10rpx;
			padding: 0 40rpx;
			background-color: #FFFFFF;
			align-items: center;
			>text{
				width: 80rpx;
				display: block;
				color: #333333;
				font-size: 26rpx;
				margin-right: 30rpx;
			}
			.date{
				width: 703rpx;
				height: 80rpx;
				opacity: 1;
				box-sizing: border-box;
				position: relative;
				margin: 0 auto;
				display: flex;
				color: #333;
				font-size: 26rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				.dateIcon{
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					top: 18rpx;
					right: 30rpx;
				}
				.arrive{
					width: 26rpx;
					height: 26rpx;
					margin: 0 49rpx 0 71rpx;
				}
				.zhi{
					
				}
			}
		}
		.noDate{
			width: 360rpx;
			position: absolute;
			left: 50%;
			top: 34%;
			transform: translate(-50%,-50%);
			color: #666666;
			font-size: 26rpx;
			text-align: center;
			image{
				width: 360rpx;
				height: 310rpx;
				display: block;
				margin-bottom: 78rpx;
			}
		}
		.filtrate{
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 26rpx;
			text{
				margin-right: 13rpx;
			}
		}
		.priceWrap{
			display: flex;
			margin: 34rpx 0 40rpx 0;
			color: #333333;
			font-size: 26rpx;
			view{
				flex: 1;
				// margin-right: 20rpx;
				font-size: 26rpx;
				color: #4D5562;
				&:last-child{
					text-align: right;
				}
			}
			text{
				color: #007664;
				font-weight: bold;
			}
		}
		.listWrap{
			// position: absolute;
			// top: 120rpx;
			// margin-top: 130rpx;
		}
		.list{
			padding: 21rpx 43rpx 27rpx 28rpx;
			width: 686rpx;
			background: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15rpx;
				.left{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					image{
						width: 72rpx;
						height: 72rpx;
						border-radius: 8rpx;
						margin-right: 30rpx;
					}
				}
				.right{
					.t1{
						font-size: 28rpx;
						color: #007664;
						font-weight: bold;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}
					.t2{
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}
			}
			.t3{
				color: #666666;
				font-size: 24rpx;
				margin-bottom: 18rpx;
				text{
					color: #333333;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
